<template>
  <LayoutHeader />
  <div class="main">
    <div class="avatar">
      <el-tooltip placement="right" content="修改头像" effect="light">
        <el-avatar ref="avatar" :src="userStore.userInfo.avatarUrl" :key="userStore.userInfo.avatarUrl" shape="square"
          :size="90" @click="modifyDialogVisible = true" style="cursor: pointer;" :crossOrigin="'anonymous'" />
      </el-tooltip>
      <ModifyAvatar v-model="modifyDialogVisible" />
    </div>
    <el-tabs tab-position="left" style="height: 600px" class="tabs">
      <el-tab-pane label="个人信息">
        <UserInfo />
      </el-tab-pane>
      <el-tab-pane label="已通过题目">
        <SubmitProblem />
      </el-tab-pane>
    </el-tabs>
  </div>
  <LayoutFooter />
</template>

<script setup>
import { ref } from 'vue'

import UserInfo from './components/UserInfo.vue'
import SubmitProblem from './components/SubmitProblem.vue'
import ModifyAvatar from './components/ModifyAvatar.vue'
import LayoutHeader from '../Layout/components/LayoutHeader.vue'
import LayoutFooter from '../Layout/components/LayoutFooter.vue'
import { useUserStore } from '@/stores/user';


const userStore = useUserStore()
const avatar = ref()

const modifyDialogVisible = ref(false)

</script>

<style scoped lang="scss">
.main {
  padding: 0 150px;
}

.avatar {
  padding: 20px;
}

.el-tabs__content {
  padding: 0 50px
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
